<template>
  <div id="id.main.item" class="main.item" @click="itemClick">
  <mu-card>
       <mu-card-header :title="contact.name" :subTitle="contact.mobile">
        <mu-avatar slot="avatar" color="greenA700" backgroundColor="tealA100">{{getAvatar}}</mu-avatar>
       </mu-card-header>
  </mu-card>
  </div>
</template>

<script>

export default {
  name: 'main',
  data() {
    return {
    };
  },
  props: ['contact'],
  computed: {//
    getAvatar() {
      if (!this.contact || !this.contact.name || this.contact.name.length <= 0) {
        return '匿';
      }
      const avatar = this.contact.name.charAt(0);
      return avatar;
    },
  },
  methods: {
    handeMenu() {
      this.$router.push('/menu');
    },
    handeSearch() {
      this.$router.push('/search');
    },
    itemClick() {
      this.$router.push({ path: `/profile/${this.contact.mobile}`, query: { name: this.contact.name, mobile: this.contact.mobile } });
    },
  },
};
</script>

<style scoped>

.mu-card-header{
	text-align:left;
}
.mu-card-text{
  	text-align:left;
}
.mu-card{
  margin:0.5rem;
}
#id.main.item{
  display: -webkit-flex; /* Safari */
  display: flex;
}
</style>
